<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
		<!-- banner -->
		<view class="banner">
			<swiper  v-if="store.mainImage" class="swiper" :autoplay="true" duration="500" :circular="true">
				<swiper-item v-for="(item,index) in store.mainImage" :key="index">
					<view class="item">
						<image :src="item?item:'../../static/lazy_detail.png'" class="img" mode="aspectFill" @click="imagePreview(index,store.mainImage)"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<swiper v-else class="swiper" :autoplay="true" duration="500" :circular="true">
				<swiper-item v-for="(item,index) in posterArr" :key="index">
					<view class="item">
						<image :src="item" class="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 商品 -->
		<view class="title">
			<view class="title_box">
				<view class="name">
					{{store.name}}
				</view>
				<view class="desc">
					
					<text v-for="(itemA,indexA) in store.benefitPoints" :key="indexA">
					 <text class="text_right">{{itemA}}</text>
					 <text class="text_xhx" v-if="indexA!==store.benefitPoints.length-1">|</text>
					</text>
				</view>
				<view class="priceAll">
					<view class="pri_new">
						<view class="new_small">
							<!-- ¥ -->
						</view>
						<view class="new_big">
							{{store.integral}}
						</view>
						<view class="new_small">
							积分
						</view>
					</view>
					<view class="pri_old">
						市场价：￥{{store.marketPrice}}
					</view>
				</view>
				<view class="member">
					<view class="member_box" @click="openPage('member',3)">
						<view class="left">
							<image
								src="https://imgs.ynz666.com/test/2025/01/08/ZmY2ODNlYTg0N2RkNDkyMGRiOWVhOWFlYTI3OGVmYjM=.png"
								mode="aspectFill" class="img"></image> 
								<view class="text_view">
										休闲吧会员到手价<text class="fontColor">0</text>元！立即省{{store.marketPrice}}元
								</view>
						</view>
						<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
						
						
					</view>
				</view>
			</view>
		</view>
		
		<!-- 门店 -->
		<view class="shop">
			<view class="shop_box">
				<view class="shop_title">
					<view class="left">
						适用门店
					</view>
					<!-- <view class="right">
						<view class="allShop">
							全部门店
						</view>
						<image src="../../static/index/index_right.png" mode="aspectFill" class="img"></image>
					</view> -->
				</view>
				<view class="shop_con" @click="openMap(item.lng,item.lat,item.address)" v-for="(item,index) in store.stores" :key="index">
					<view class="con_left">
						<image :src="item.publicityImgs[0]" mode="aspectFill" class="img"></image>
						<view class="conAll">
							<view class="name">
								{{item.name}}
							</view>
							<view class="address">
								{{item.address}}
							</view>
							<view class="distance">
								距您{{item.distance}}km
							</view>
						</view>
						
					</view>
					<view class="con_right">
						<image src="https://imgs.ynz666.com/test/2025/01/08/MzEzOTg5ZmRkNTBhOWZkZjA2MWU1ODI0OTFiNjU4NTU=.png" mode="aspectFill" class="img"></image>
						<view class="text">
							导航
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 详情 -->
		<view class="detail">
			<view class="detail_box">
				<view class="detail_title">
					<view :class="index==navIndexOne?'item item_active':'item'" v-for="(item,index) in navOneList" :key="index"
						@click="navClickOne(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="detail_con">
					<view class="textAll">
						<!-- <view class="top">
							·文字介绍
						</view> -->
						<view class="bot">
							{{store.description}}
						</view>
					</view>
					<view class="imgAll">
						<!-- <view class="top">
							·图片介绍
						</view> -->
						<view class="bot">
							<image :src="item" mode="aspectFill" class="img" v-for="(item,index) in store.images" :key="index"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="footBtn">
			<view class="foot_box">
				<view class="left">
					<view class="item" @click="WeixinServer">
						<image
							src="https://imgs.ynz666.com/test/2025/01/08/NzI5ZTI0ZmE4ZDE3MzEyYmVmYzhlNWNlOTQ3YzdmOWU=.png"
							mode="aspectFill" class="img"></image> 
						<view class="bot">
							客服
						</view>
					</view>
					<view class="item" @click="sharePoster()">
						<image
							src="https://imgs.ynz666.com/test/2025/01/08/YzE5NjQ3MWMwMmZmM2M0M2NjYTY5YzYyZGYxNjVkNTQ=.png"
							mode="aspectFill" class="img"></image> 
						<view class="bot">
							分享
						</view>
						<!-- <button open-type="share" id="placard"></button> -->
					</view>
				</view>
				<view class="right">
					<!-- mineInfo.memberStatus==1||!store.memberCanBuy -->
					<view class="btn btn1" v-if="!store.memberCanBuy">
						<view class="textAll" @click="openVerify(1)">
							<view class="view1">
								积分兑换
							</view>
							<view class="view2">
								{{store.integral}}积分
							</view>
						</view>
						<button v-if="!mineInfo.mobile && mineInfo.phone.mobile!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
					</view>
					<view :class="store.memberCanBuy?'btn btn2 btn2_active':'btn btn2'" @click="openVerify(2)">
						<view class="textAll">
							<view class="view1">
								{{store.memberCanBuy?'会员免费玩':'续费会员'}}
							</view>
							<view class="view2">
								{{store.memberCanBuy?'0元':'99元起'}}
							</view>
						</view>
						<button v-if="!mineInfo.mobile && mineInfo.phone.mobile!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumberTwo"></button>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- 标准版确认取消弹框 -->
		<view class="mask_Verify" v-if="modalVerify">
			<view class="maskFour_box">
				<view class="bj_box">
					<!-- <image
						src=""
						mode="scaleToFill" class="free_img"></image> -->
						<view class="box">
						  <view class="box_title">
						  	确认使用
						  </view>
							<view class="box_con">
								本权益需要消费你{{store.integral}}积分，一经兑换确认积分不可退回，确定要兑换吗
							</view>
							<view class="box_con" v-if="store.quantityLimit>0&&store.restrictionType==1">
								此权益
								<text v-if="store.cycle==1">每天</text>
								<text v-if="store.cycle==2">每周</text>
								<text v-if="store.cycle==3">每月</text>
								<text v-if="store.cycle==4">每年</text>
								<text v-if="store.quantityLimit>=store.quantity">次数剩余：{{store.quantityLimit-store.quantity}}/{{store.quantityLimit}}</text>
								<text v-else>次数剩余：0/{{store.quantityLimit}}</text>
								
							</view>
							<view class="box_font">
								<view class="btn btn1" @click="verifyLeave">
									确认离开
								</view>
								<view class="btn btn2" @click="verifyUse(1)">
									确认使用
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
		
		<!-- 标准版确认取消弹框 -->
		<view class="mask_Verify" v-if="modalVerifyTwo">
			<view class="maskFour_box">
				<view class="bj_box">
					<!-- <image
						src=""
						mode="scaleToFill" class="free_img"></image> -->
						<view class="box">
						  <view class="box_title">
						  	使用提醒
						  </view>
							<view class="box_con" v-if="store.memberQuantityLimit>0">
								会员免费次数剩余：{{store.memberQuantityLimit-store.memberQuantity}}/{{store.memberQuantityLimit}}
							</view>
							
							<view class="box_con" v-if="store.quantityLimit>0&&store.restrictionType==1">
								此权益
								<text v-if="store.cycle==1">每天</text>
								<text v-if="store.cycle==2">每周</text>
								<text v-if="store.cycle==3">每月</text>
								<text v-if="store.cycle==4">每年</text>
								<text v-if="store.quantityLimit>=store.quantity">次数剩余：{{store.quantityLimit-store.quantity}}/{{store.quantityLimit}}</text>
								<text v-else>次数剩余：0/{{store.quantityLimit}}</text>
								
							</view>
							
							<view class="box_con" v-if="store.quantityLimit>0&&store.restrictionType==2">
								此商品次数剩余：{{store.quantityLimit-store.quantity}}/{{store.quantityLimit}}
							</view>
							
							<!-- <view class="box_con" v-if="store.quantityLimit!=store.quantity">
								此权益会员支持畅玩{{store.quantityLimit}}次特权，目前你剩余{{store.quantityLimit-store.quantity}}次，要使用吗？
							</view>
							<view class="box_con" v-else>
								此权益会员支持畅玩{{store.quantityLimit}}次特权，目前你剩余{{store.quantityLimit-store.quantity}}次，需要购买会员重新获取次数吗？
							</view> -->
							<!-- <view class="box_con" v-if="store.restrictionType==0">
								此权益会员支持无限畅玩，要使用吗？
							</view>
							<view class="box_con" v-if="store.restrictionType==1">
								此权益会员
								<text v-if="store.cycle==1">每天</text>
								<text v-if="store.cycle==2">每周</text>
								<text v-if="store.cycle==3">每月</text>
								<text v-if="store.cycle==4">每年</text>
								支持畅玩{{store.quantityLimit}}次特权，目前你剩余{{store.quantityLimit-store.quantity}}次，要使用吗？
							</view>
							<view class="box_con" v-if="store.restrictionType==2">
								此权益会员支持畅玩{{store.quantityLimit}}次特权，目前你剩余{{store.quantityLimit-store.quantity}}次，要使用吗？
							</view> -->
							<view class="box_font">
								<view class="btn btn1" @click="verifyLeave">
									我在想想
								</view>
								<view class="btn btn2" @click="verifyUse(2)" v-if="store.memberQuantityLimit!=store.memberQuantity">
									确认使用
								</view>
								<view class="btn btn2" @click="openPage('member',3)" v-else>
									确认购买
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
		
		<!-- 活动海报分享 -->
		<painter :palette="template" @imgOK="onImgOK" :widthPixels='1200'
			style='width:;height: ;position: absolute; left: -9999rpx;' />
		<!-- 活动海报分享 -->
		<view class="mask" v-if="showPoster" @click="closeMask">
			<view class="mask_box">
			<image class="poster" :src="imagePath" mode="widthFix"></image>
			<view class="down_box1">
				<view class="box_btn1">
					<text>分享好友</text>
					<button open-type="share" id="placard"></button>
				</view>
				<view class="box_btn2" @tap.stop="saveImg">
					保存本地
				</view>
			</view>
			<view class="fot">
				<image
					src="https://imgs.ynz666.com/2023/12/04/NTZkZTQ5MmVlYTQxODdkMzE3ZDZjNTE0OTg2NGFjZmQ=.png"
					mode="scaleToFill" class="img" @click="closeOpenRedPacket"></image>
			</view>
			</view>
			
			
			
			
		<!-- 	<view v-if="imagePath" @tap.stop="saveImg" class="down-box"
				:style="'padding-bottom:'+(bottomTabbar>0?bottomTabbar:30)+'px;'">
				<image src="../../static/poster-save.png" mode="aspectFill"></image>
				<view>保存到相册</view>
			</view> -->
			
		</view>
		
		</view>
	</view>
</template>

<script>
	import QQMapWX from 'lib/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js';
	import Map from 'js_sdk/ms-openMap/openMap.js'
	var qqmapsdk = new QQMapWX({
		key: 'IYIBZ-3DC6U-HRYVF-2E3CJ-OSJDS-E5FDF' 
	});
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import gongType from '@/utils/debounce.js'
	import painter from '@/wxcomponents/painter/painter';
	import loading from '../../components/loading/loading.vue';
	import {
		apiProductInfo,apiOrderGoodsBuy,apiMiniProgramQrCode
	} from '../../apis/my.js';
	var app = getApp();
	export default {
		components: {
			painter,
			loading
		},
		data() {
			return {
				loading:true,
				inviteId:'',//用户个人id
				mineInfo:{},
				store_id: "",//商品id
				productNewId:'',//新人id
				location: "",
				store: {},
				navOneList:[
					{
						name:'权益详情',
						id:0
					},
					// {
					// 	name:'购买须知',
					// 	id:1
					// }
				],
				navIndexOne:0,//切换正在 和我的
				modalVerify:false,
				
				codeimg: '',//分享码
				imagePath: '',
				showPoster: false,
				template: {},
				modalVerifyTwo:false,
				nickName:'',
				
				isbuy:1,// 1 不直接购买 2 直接购买
			}
		},
		onShareAppMessage(res) {
			let title = this.nickName+'邀请你一起免费兑换 |'+this.store.name
			// if(res.target.id=="placard"){
				return {
					title: title,
					imageUrl : this.store.mainImage[0],
					path: `/pageC/pointEquity/pointEquity?store_id=${this.store_id}&inviteId=${this.mineInfo.id}`
				}
			// }
		},
		onLoad(options){
			let that = this;
			let store_id = null;
			that.location = app.globalData.latitude + "," + app.globalData.longitude;
			
			// 正常进 小程序码进 分享进
			// app.isLogin({},function(login){
				if(options.inviteId && options.store_id){
					console.log('分享进分享进分享进',options)
					that.inviteId=options.inviteId
					// 分享进
					store_id = options.store_id;
					that.store_id = store_id;
					that.productNewId=options.new_id
					
					
					app.isLogin({userId:that.inviteId,productId:that.store_id},function(login){
						that.LoginInvite(login);
						that.getDetail(store_id, that.location);
						// that.QrcodeMed();
					})
					
					
				}else if(options.scene){
					console.log(options.scene,"options.scene111")
					console.log('小程序码进',options)
					// 小程序码
					let xuScene = decodeURIComponent(options.scene)
					console.log(xuScene,"xuScene")
					
					// 将查询字符串转换为对象
					const queryObject = xuScene.split('&').reduce((acc, pair) => {
					  const [key, value] = pair.split('=');
					  acc[key] = Number(value); // 如果值需要是数字类型，可以使用 Number() 转换
					  return acc;
					}, {});
					
					console.log(queryObject,"queryObject")
					// let qrSourceId = decodeURIComponent(options.scene).split('=')[1];
					// console.log(qrSourceId,"qrSourceId")
					that.inviteId=queryObject.inviteId
					that.store_id=queryObject.store_id
					
					app.isLogin({userId:that.inviteId,productId:that.store_id},function(login){
						// that.LoginInvite(login);
						// that.getDetail(store_id, that.location);
						// that.QrcodeMed();
						
						that.LoginInvite(login);
						that.getDetail(queryObject.store_id, that.location);
						// that.QrcodeMed();
					})
					
					
					
					
					// app.QrcodeSource(qrSourceId).then(qrinfo=>{
					// 	store_id = qrinfo.sourceId;
					// 	that.store_id = store_id;
					// 	that.getDetail(store_id, that.location);
					// 	that.LoginInvite(login);
					// 	that.QrcodeMed();
					// })
				}else{
					console.log('正常进',options)
					// console.log(login,"loginloginlogin")
					
					store_id = options.store_id;
					that.store_id = store_id;
					
					that.isbuy=options.isbuy
					
					that.productNewId=options.new_id
					
					
					app.isLogin({},function(login){
						that.getDetail(store_id, that.location);
						that.LoginInvite(login);
						// that.QrcodeMed();
					})
				
					
				}
			// })
		},
		onShow(){
			let that = this;
			that.getDetail(that.store_id, that.location);
			app.getUserInfo(function(lRes) {
				that.mineInfo = lRes;
				uni.setStorageSync('mineInfo', lRes);
			})
			// app.isLogin({},function(login){})
		},
		methods: {
			// 关闭海报弹框
			closeMask() {
				this.showPoster = false;
			},
			// 打开确认弹框
			openVerify(index){
				if(index==1){
					this.modalVerify=true
				}else{
					if(this.mineInfo.memberStatus!==2){
						this.openPage('member',3);
						// uni.showToast({
						// 	title:'你还不是会员，请去个人中心页面购买',
						// 	icon:'none'
						// })
						
					}else{
						this.modalVerifyTwo=true
					}
					
				}
				
			},
			// 确认离开
			verifyLeave(){
				this.modalVerify=false
				this.modalVerifyTwo=false
			},
			// 确认使用
			verifyUse:gongType.debounce(function (e){
				console.log(e,"eeeee")
				
				var that = this
				if(!that.store.memberCanBuy&&e==2){
					
					uni.showToast({
						title:'该权益会员特权次数已使用完，不可兑换',
						icon:'none'
					})
					this.openPage('member',3);
					return;
				}
				
				let data={
					productId:that.productNewId?'':that.store_id,
					productNewId:that.productNewId,
					qty:1,
					tel:'',
					pointType:e==2?true:''
				}
				apiOrderGoodsBuy(data).then(payment=>{
					switch(payment.code){
						case 0:
							uni.navigateTo({
								url: `/pageC/orderAll/orderAll`
							})
							this.modalVerify=false
							this.modalVerifyTwo=false
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
			}, 1000),
			// 获取商家详情
			getDetail(s_id, location) {
				var that = this
				// uni.showLoading();
				const params = {
					productId:  s_id?s_id:'',
					productNewId:that.productNewId,
					lat: location.split(',')[0],
					lng: location.split(',')[1],
				}
				console.log(params,"params")
				apiProductInfo(params).then(res=>{
					console.log(res,'商户详情')
					that.store = res.data
					
				  that.store_id=res.data.id
					that.QrcodeMed();
					
					
					// restrictionType  0-无（无时间周期，无购买）、1-有时间周期、2 无时间周期 但是需要判断最大购买次数 
					// cycle 时间周期 1-每天、2-每周、3-每月、4-每年
					// quantityLimit 限制数量 quantity 个人已购数量

					if(that.isbuy==2){
						that.openVerify(1);
					}
					// that.loading=false
				})
				
			},
			// 用户地图
			MapDirection(){
				let that = this;
				qqmapsdk.direction({
					mode:'walking',
					tags:['LEAST_TIME'],
					from:{
						latitude:app.globalData.latitude,
						longitude:app.globalData.longitude
					},
					to:{
						latitude:that.store.location.split(',')[0],
						longitude:that.store.location.split(',')[1]
					},
					success(loc) {
						console.log(loc,"loc")
						that.mapDuration = loc.result.routes[0].duration;
					}
				})
			},
			// 打开地图
			openMap(lat,lng,address) { //lat 纬度 lng 经度
				Map.openMap( Number(lng),Number(lat), address, "gcj02");//wgs84
			},
			// 评论图片预览
			imagePreview(index,imgArr){
				uni.previewImage({
					urls:imgArr,
					current:imgArr[index],
				})
			},
			navClickOne(item, index){
				this.navIndexOne = index
			},
			// 接入微信客服
			WeixinServer(){
				console.log("打开客服")
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},
			LoginInvite(login){
				let that = this;
				let inviteId = that.inviteId;
				that.mineInfo = login;
				that.nickName = login.nickname.length>3?login.nickname.slice(0,3)+'...':login.nickname
				that.loading=false
				// if(inviteId){
				// 	app.isLogin({userId:inviteId,productId:that.store_id},function(res){
				// 		// that.mineInfo = res;
				// 		// console.log(that.mineInfo,"that.mineInfo222")
				// 		// that.nickName = that.mineInfo.nickname.length>3?that.mineInfo.nickname.slice(0,3)+'...':that.mineInfo.nickname
				// 	});
				// }
			},
			// 手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					// if(that.inviteId !==''){
					// 	app.isLogin({id:that.inviteId},function(login){
					// 		that.mineInfo = login;
					// 	});
					// }else {
						
					// }
					app.getUserInfo(function(lRes){
						that.mineInfo = lRes;
						that.openVerify(1);
					})
				});
			},
			onGetPhoneNumberTwo(e){
				let that = this;
				app.GetMobile(e,function(e){
					app.getUserInfo(function(lRes){
						that.mineInfo = lRes;
						that.openVerify(2);
					})
				});
			},
			// 生成小程序码
			QrcodeMed() {
				let that = this;
				// http.post('/api/platform/v1/sale/info').then(info => {
					// if (info.data.saleId) {
						// that.saleId = info.data.saleId;
						let data = {
							path: 'pageC/pointEquity/pointEquity',
							width: 150,
							isHyaline: false,
							type: 0,//1 售卡码  2团购列表码   8销售首页码
							scene: `store_id=${that.store_id}&inviteId=${that.mineInfo.id}`,
							sourceId: "1"
						}
						apiMiniProgramQrCode(data).then(res=>{
							let qrUrl = 'https://imgs.ynz666.com/' + res.data.qrCodeUrl
							that.codeimg = qrUrl;
						})
						
						// http.post('/api/user/v1/qrCode', data).then(code => {
						// 	let qrUrl = 'https://imgs.ynz666.com/' + code.data.qrCodeUrl
						// 	that.codeimg = qrUrl;
							
						// })
					// }
				// }).catch(error => {})
			},
			// 分享海报
			sharePoster() {
				this.handleStartDrawImg();
				this.showPoster = true;
				
			},
			closeOpenRedPacket(){
				this.showPoster = false;
			},
			// 保存到相册
			saveImg() {
				let that = this;
				app.photosAblum(function() {
					uni.saveImageToPhotosAlbum({
						filePath: that.imagePath,
						success(down) {
							uni.hideLoading();
							that.showPoster = false;
							uni.showToast({
								title: '图片保存成功',
								icon: 'none'
							})
						}
					})
				})
			},
			
			// 分享到微信
			shareImg() {
				console.log('点击分享微信')
				let that = this;
				uni.showShareImageMenu({
					path: that.imagePath,
				})
			},
			handleStartDrawImg() {
				console.log(this.codeimg,"this.codeimg")
				this.template = {
					width: '520px',
					height: '820px',
					background: "#fff",
					borderRadius: '24px',
					views: [
						{
							type: 'image',
							url: 'https://imgs.ynz666.com/test/2025/01/08/YzQzYTI3MjAxYjA4N2VlZTIxN2MzMjliZmEwM2E0YzU=.png',
							mode: 'aspectFit',
							css: {
								top: '0px',
								left: '0px',
								width: '520px',
								height: '820px',
								borderRadius: '24px',
							}
						},
						{
							type: 'image',
							url:this.store.mainImage[0],
							mode: 'aspectFit',
							css: {
								top: '188px',
								left: '42px',
								width: '436px',
								height: '342px',
								borderRadius: '24px',
							}
						},
						{
							type: 'image',
							url: this.codeimg,
							mode: 'aspectFit',
							css: {
								bottom: '48px',
								left: '58px',
								width: '100px',
								height: '100px',
								borderRadius: '50%',
							}
						},
					 {
					 		type: 'text',
					 		text: this.nickName,
					 		css: {
					 		maxLines: 1,
					 		width: '430px',
					 		color: '#3A3134',
					 		left: '46px',
					 		top: '565px',
					 		fontSize: '24px',
					 		}
					 },
					 {
					 		type: 'text',
					 		text: '邀请你一起免费兑换',
					 		css: {
					 		maxLines: 1,
					 		width: '430px',
					 		color: '#3A3134',
					 		left: '143px',
					 		top: '555px',
					 		fontSize: '32px',
							fontWerght: 'bold',
							// lineHeight: '45rpx'
					 		}
					 },
					 {
					 		type: 'text',
					 		text: this.store.name,
					 		css: {
					 		maxLines: 1,
					 		width: '430px',
					 		color: '#3A3134',
					 		left: '46px',
					 		top: '600px',
					 		fontSize: '24px',
					 		
					 		}
					 },
					 {
					 		type: 'text',
					 		text: '立即扫码',
					 		css: {
					 		maxLines: 1,
					 		width: '430px',
					 		color: '#3A3134',
					 		left: '180px',
					 		bottom: '106px',
					 		fontSize: '24px',
					 		
					 		}
					 },
					 {
					 		type: 'text',
					 		text: '享受新人免单福利',
					 		css: {
					 		maxLines: 1,
					 		width: '430px',
					 		color: '#3A3134',
					 		left: '180px',
					 		bottom: '70px',
					 		fontSize: '24px',
					 		
					 		}
					 }
					],
					
				};
			},
			onImgOK(e) {
				console.log(e,"eee")
				this.imagePath = e.detail.path;
			},
			onImgErr(e) {
				console.log(e,"eee2222")
			},
			openPage(page, index) {
				this.modalVerify=false
				this.modalVerifyTwo=false
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						
						uni.navigateTo({
							url: `/pageC/${page}/${page}?joinProductId=${this.store.id}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
		},
		
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	// banner
	.banner {
		width: 100%;
		height: 544rpx;
		position: relative;
		.swiper{
			height: 544rpx;
		}
		.item{
			position:relative;
			display: block;
			width: 100%;
			height: 544rpx;
			margin: 0 auto;
			overflow: hidden;
		}
		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.title{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: linear-gradient( 180deg, #FFF1F0 0%, #FFFFFF 100%);
		border-radius: 20rpx;
		border: 2rpx solid #FFFFFF;
		.title_box{
			padding: 28rpx 20rpx 22rpx;
			.name{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				word-break: break-all;
				white-space: pre-wrap;
				word-wrap: break-word;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.desc{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding-top: 16rpx;
				.text_xhx{
					margin: 0 10rpx;
				}
			}
			.priceAll{
				display: flex;
				align-items: baseline;
				padding-top: 8rpx;
				.pri_new{
					color: rgba(253, 3, 3, 1);
					display: flex;
					align-items: baseline;
					.new_small{
						font-size: 22rpx;
					}
					.new_big{
						font-size: 42rpx;
						font-weight: bold;
						padding: 0 2rpx 0 4rpx;
					}
				}
				.pri_old{
					padding-left: 10rpx;
					font-size: 22rpx;
					color: #999999;
					text-decoration-line: line-through;
				}
			}
			.member{
				margin-top: 18rpx;
				width: 100%;
				height: 80rpx;
				background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
				border-radius: 20rpx;
				border: 2rpx solid rgba(255,182,182,0.3);
				.member_box{
					padding: 0 32rpx 0 20rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 96rpx;
							height: 48rpx;
						}
						.text_view{
							padding-left: 14rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 24rpx;
							color: #310D09;
							.fontColor{
								color: rgba(255, 26, 52, 1);
							}
						}
					}
					.right{
						width: 18rpx;
						height: 26rpx;
					}
					
				}
			}
		}
	}
	.shop{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.shop_box{
			padding: 20rpx 18rpx 28rpx;
			.shop_title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #10121E;
				}
				.right{
					display: flex;
					align-items: center;
					.allShop{
						font-weight: 400;
						font-size: 24rpx;
						color: #8C8D93;
					}
					.img{
						width: 18rpx;
						height: 26rpx;
						margin-left: 12rpx;
					}
				}
			}
			.shop_con{
				margin: 12rpx 14rpx 0 16rpx;
				display: flex;
				align-items: center;
				.con_left{
					display: flex;
					align-items: center;
					flex: 1;
					.img{
						width: 128rpx;
						height: 128rpx;
						border-radius: 12rpx;
					}
					.conAll{
						flex: 1;
						padding-left: 22rpx;
						.name{
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
						}
						.address{
							font-weight: 400;
							font-size: 24rpx;
							color: #797A81;
							padding: 8rpx 0 4rpx;
						}
						.distance{
							font-weight: 400;
							font-size: 24rpx;
							color: #797A81;
						}
					}
				}
				.con_right{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.img{
						width: 50rpx;
						height: 50rpx;
					}
					.text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #797A81;
						margin-top: 2rpx;
					}
				}
			}
		}
	}
	
	.detail{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 200rpx;
		.detail_box{
			padding: 24rpx 20rpx 28rpx;
			.detail_title{
				display: flex;
				align-items: center;
				.item{
					font-family: PingFangSC, PingFang SC;
					font-size: 28rpx;
					color: #10121E;
					color: rgba(139, 141, 146, 1);
					margin-right: 20rpx;
				}
				.item_active{
					font-weight: bold;
					color: #10121E;
				}
			}
			.detail_con{
				.textAll{
					.top{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						padding: 14rpx 0;
					}
					.bot{
						white-space: pre-wrap;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #2F2F2F;
						line-height: 40rpx;
						padding-top: 14rpx;
					}
				}
				.imgAll{
					.top{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						padding: 14rpx 0;
					}
					.bot{
						width: 100%;
						display: flex;
						flex-direction: column;
						padding-top: 14rpx;
						.img{
							width: 100%;
						}
					}
				}
			}
		}
	}
	
	.footBtn{
		width: 100%;
		height: 170rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		box-shadow: 0rpx -8rpx 22rpx 0rpx #F7F7F7;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.foot_box{
			// padding: 0 32rpx 0 54rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.left{
				display: flex;
				align-items: center;
				padding-left: 50rpx;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					.img{
						width: 36rpx;
						height: 36rpx;
					}
					.bot{
						font-weight: bold;
						font-size: 20rpx;
						color: #310D09;
						padding-top: 2rpx;
					}
					button {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}
				}
				.item:nth-child(1){
					margin-right: 60rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				padding-right: 32rpx;
				.btn{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					.textAll{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					button{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}
					.view2{
						font-size: 22rpx;
						font-weight: inherit;
					}
				}
				.btn1{
					width: 224rpx;
					height: 84rpx;
					background: #FFFFFF;
					border-radius: 42rpx;
					border: 2rpx solid #DEDEDE;
					font-weight: bold;
					font-size: 26rpx;
					color: #181818;
					margin-right: 22rpx;
				}
				.btn2{
					width: 224rpx;
					height: 84rpx;
					background: linear-gradient( 115deg, #FFAB52 0%, #FF2125 100%);
					box-shadow: inset 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,0.5);
					border-radius: 42rpx;
					border: 2rpx solid #FFAB52;
					font-weight: bold;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				.btn2_active{
					width: 448rpx;
				}
			}
		}
	}
	
	
}

.mask_Verify{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.65);
			
		.maskFour_box {
			width: 604rpx;
			overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -302rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.bj_box{
				// background: #fff;
				width: 604rpx;
				// height: 358rpx;
				height: 420rpx;
				position: relative;
				.free_img {
					width: 604rpx;
					height: 358rpx;
				}
				.box{
					background: #fff;
					border-radius: 24rpx;
					padding-bottom: 30rpx;
					width: 604rpx;
					// height: 358rpx;
					position: absolute;
					top: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					.box_title{
						font-family: PingFangSC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #181818;
						padding-top: 40rpx;
					}
					.box_con{
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
						line-height: 40rpx;
						margin: 20rpx 76rpx 0;
					}
					.box_font{
						margin: 44rpx 0 0;
						width: 540rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn{
							width: 252rpx;
							height: 82rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.btn1{
							background: #FFFFFF;
							border-radius: 42rpx;
							border: 2rpx solid #DEDEDE;
							font-weight: bold;
							font-size: 30rpx;
							color: #181818;
						}
						.btn2{
							background: linear-gradient( 225deg, #FE4602 0%, #FF8414 100%);
							border-radius: 42rpx;
							border: 2rpx solid #FF8414;
							font-weight: bold;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;
		.mask_box{
			width: 520rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -260rpx;
			height: 820rpx;
			.poster {
				width: 520rpx;
				position: absolute;
				top: 0;
			}
			.down_box1{
				width: 520rpx;
				position: absolute;
				bottom: -118rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.box_btn1{
					width: 240rpx;
					height: 90rpx;
					background: linear-gradient( 102deg, #FEE1DB 0%, #FFF9F7 100%);
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: rgba(58, 49, 52, 1);
					}
					
					button {
						width: 200rpx;
						height: 78rpx;
						border-radius: 50rpx;
						position: absolute;
						top: 0;
						opacity: 0;
						border: 1rpx solid red;
					}
				}
				.box_btn2{
					width: 240rpx;
					height: 90rpx;
					background: linear-gradient( 315deg, #FFA44F 0%, #FF2D29 100%);
					box-shadow: inset 0rpx 2rpx 16rpx 0rpx rgba(255,255,255,0.5);
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.fot{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: -200rpx;
				.img{
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	
		
		
	
		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;
	
			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
</style>
